<template>
  <!-- 产品详情主容器 -->
  <div v-if="product">
    <h1>{{ product.name }}</h1>
    <p><strong>描述：</strong>{{ product.description }}</p>
    <p><strong>价格：</strong>{{ product.price }}</p>
    <!-- 返回按钮 -->
    <el-button type="primary" @click="goBack">返回列表</el-button>
  </div>
  <div v-else>
    <el-alert title="未找到该产品" type="error" show-icon />
  </div>
</template>

<script setup>
// 引入 Nuxt3 的 useRoute 获取路由参数，useRouter 用于跳转
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

// 获取当前路由对象
const route = useRoute()
// 获取路由跳转对象
const router = useRouter()
// 定义响应式变量 product 用于存储产品详情
const product = ref(null)

// 定义返回列表的函数
function goBack() {
  router.push('/products')
}

// 页面加载时根据ID获取产品详情
onMounted(async () => {
  // 获取路由参数中的id
  const id = route.params.id
  // 调用API获取产品详情
  const res = await fetch(`/api/products?id=${id}`)
  product.value = await res.json()
})
</script>

<style scoped>
h1 {
  margin-bottom: 20px;
}
p {
  margin-bottom: 10px;
}
</style> 